<template>
  <div class="login" eleent-loading-background="">
    <div class="logo">
      <el-image style="width: 180px; height: 150px"
                :src="logoUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                fit="cover"
      />

    </div>
    <!--    登录表单-->
    <div class="login-container">
      <h2>欢迎来到原神启动论坛</h2>

      <div class="username-container">
        <span>账号：</span>
        <el-input @blur="checkUsername()" v-model="userLogin.username" placeholder="请输入账号！" class="username"/>
        <span class="usernameError">{{ usernameMsg }}</span>

      </div>

      <div class="password-container">
        <span>密码：</span>
        <el-input
            @blur="checkPassword()"
            v-model="userLogin.password"
            type="password"
            placeholder="请输入密码！"
            show-password
            class="password"
        />
        <span class="usernameError">{{ userPwdMsg }}</span>
      </div>
      <div class="login-button-container">
        <el-button round @click="login()" class="login-button">登录</el-button>
        <router-link to="/regist">
          <el-button round>注册</el-button>
        </router-link>
      </div>
      <div class="agreement">
        <el-checkbox v-model="radio" label="点击视为同意原神启动论坛用户协议" size="large"/>
      </div>
    </div>


  </div>
</template>

<script setup>

import {reactive, ref} from 'vue'
//导入request.js
import {defineUser} from "../../stores/userStore.js";
//导入编程式路由
import {useRouter} from "vue-router";

import {ElMessage} from "element-plus";
import {getToken} from "../../utils/token-tuils.js";
const router = useRouter()
//导入pinia中的user数据
let user = defineUser()
//背景图片
let logoUrl = "https://s11.ax1x.com/2023/12/20/pioO4YT.png"
//定义用户登录对象
let userLogin = reactive({
  username: '',
  password: ''
})

let radio = ref('')
// 响应式数据,保存校验的提示信息
let usernameMsg = ref('')
let userPwdMsg = ref('')


//检查账号格式
let checkUsername = () => {
  //定义正则
  let usernameReg = /^[a-zA-Z0-9]{6,10}$/
  //校验
  if (userLogin.username === '') {
    usernameMsg.value = ''
    return false
  }
  if (!usernameReg.test(userLogin.username)) {
    usernameMsg.value = '格式错误'
    return false
  }
  usernameMsg.value = ''
  return true
}
//检查密码格式
let checkPassword = () => {
// 定义正则
  let passwordReg = /^[0-9]{6}$/
  if (userLogin.password === '') {
    userPwdMsg.value = ''
    return false
  }
  // 校验密码
  if (!passwordReg.test(userLogin.password)) {
    // 格式不合法
    userPwdMsg.value = "格式错误"
    return false
  }
  userPwdMsg.value = ""
  return true
}

//检查账号，密码，用户准则是否正确写入
function checkLogin() {
  return checkUsername() && checkPassword() && radio.value
}

//登录
async function login() {
  if (!checkLogin()) {
    ElMessage.error("格式有问题！")
    return;
  }
  let data = await user.login(userLogin)
  if (data.code === 2000) {
    console.log("login:"+user.token);
    ElMessage.success("登录成功")
    //跳转到首页
    console.log("跳转到首页"+getToken())
    await router.push('/home')
  }else{
    ElMessage.error(data.message)
  }

}


</script>

};
<style>
.login {
  width: 100vw;
  height: 100vh;
  /* 让图片填充元素 */
  background: url('../../assets/homepageBackgroundImage.jpg') center/contain no-repeat;
  background-size: cover; /* 保持图片比例并填充整个元素 */
}

.logo {
  margin-right: 1500px;
  padding-top: 30px;
}

.login-container {
  width: 400px;
  height: 450px;
  background-color: rgb(255, 255, 255, 0.5);
  border: 1px solid rgb(255, 255, 255, 0.5) ;
  border-radius: 10px;
  margin-top: 80px;
  margin-right: 200px;
  float: right;
}

.username-container {
  margin-top: 30px;
}

.username {

  width: 200px;
}

.password {
  width: 200px;
}

.password-container {
  margin-top: 30px;
}

.login-button-container {
  margin-top: 50px;
}

.login-button {
  margin-right: 20px;
}

.agreement {
  margin-top: 30px;
}

.usernameError {
  margin-left: 10px;
  color: red;

}
</style>
